<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>材料库存</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div id="parentTarget">
        <!-- 查询条件 -->
        <div class="demoTable">
            <label for="demoReload">搜索批次编号：</label>
            <div class="layui-inline">
                <input class="layui-input" name="lotId" id="demoReload" autocomplete="off">
            </div>
             <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <table id="demo" lay-filter="test"></table>
    </div>
</body>
<!--<script src="../layui/layui.js"></script>-->
<script !src="">

    layui.use(['table', 'form', 'laydate'], function(){
        let table = layui.table
            , form = layui.form
            , laydate = layui.laydate
            , $ = layui.$;

        /** 声明数据对象 **/
        let goodsList; //物品信息列表
        let dataParams = new Array(); //物品信息下拉框数值

        /* 获取声明对象数据 */
        updateSelfData();
        // alert(JSON.stringify(goodsList));
        /** 获取声明对象数据 **/
        function updateSelfData() {
            //关闭异步
            $.ajaxSettings.async = false;
            //物品信息列表
            $.post('/pi/query',{},function (result) {
                goodsList = result.data;
            });
            //开启异步
            $.ajaxSettings.async = true;
            //生成dataParams数组
            for (let i = 0; i < goodsList.length; i++) {
                dataParams.push({name: goodsList[i].pi.id, value: goodsList[i].pi.name});
            }
            // alert(JSON.stringify(dataParams))
        }



        //表格渲染
        let tableIns = table.render({
            elem: '#demo'
            ,height : 550
            ,width : 1310
            ,url: '/l/query' //数据接口
            ,page: true //开启分页
            // ,toolbar: '#toolbarDemo' //开启自定义按钮
            // ,toolbar: 'default' //开启自定义按钮
            ,toolbar: true
            ,defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '添加'
                ,layEvent: 'add'
                ,icon: 'layui-icon-add-1'
            },{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '上传数据'
                ,layEvent: 'upload'
                ,icon: 'layui-icon-upload'
            },'filter', 'exports', 'print']
            ,cols: [[ //表头
                {fixed: 'left', type: 'checkbox', width: 50}
                ,{type: 'numbers', title: '序号', width: 80, sort: true}
                ,{field: 'goodsId', title: '产品编号', minWidth: 120, sort: true}
                ,{field: 'lotId', title: '批次编号', minWidth: 120}
                ,{field: 'produceTime', title: '出产时间', minWidth: 120}
                ,{field: 'quantity', title: '库存数量', width: 100, sort: true}
                ,{field: 'standbyOne', title: '计量单位', minWidth: 120, sort: true}
                // ,{field: 'lotId', title: '材料批次', minWidth: 120}
                ,{fixed: 'right', title: '操作', width: 200, toolbar: '#barDemo'}
            ]]
            ,parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.items //解析数据列表
                };
            }
            ,request: {
                pageName: 'currPage' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,id: 'testReload'
        });

        //按钮单击事件，条件搜索
        $('.demoTable .layui-btn').on('click', function () {
            tableIns.reload({
                where: {
                    lotId: $('#demoReload').val()
                }
            })
        });

        //监听单元格事件
        //工具条事件
        table.on('tool(test)', function(obj){
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
                //向服务端发送查看详情指令
                $.post('/l/query',{'id':data.id},function (res) {
                    let items = res.data.items
                    showInfo(items[0]);
                    form.render();
                });
            } else if(layEvent === 'del'){ //删除
                // alert(data);
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('/l/remove',{'id':data.id});
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                //向服务端发送查看详情指令
                $.post('/l/query',{'id':data.id},function (res) {
                    let items = res.data.items
                    editInfo(items[0]);
                    form.render();
                });
            }
        });

        /* 弹出层 */
        /** 详情 **/
        function showInfo(data) {
            layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '批次详情'
                ,content: $('#detailPage').html()
            });
            form.val('example',{
                'id': data.id
                ,'lotId': data.lotId
                ,'goodsId': data.goodsId
                ,'quantity': data.quantity
                ,'produceTime': data.produceTime
                ,'standbyOne': data.standbyOne
            });
        }
        /** 编辑 **/
        function editInfo(data) {
            layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '批次编辑'
                ,content: $('#editPage').html()
            });
            printOption(dataParams);
            //赋初值
            form.val('example',{
                'id': data.id
                ,'lotId': data.lotId
                ,'goodsId': data.goodsId
                ,'quantity': data.quantity
                ,'produceTime': data.produceTime
                ,'standbyOne': data.standbyOne
            });
            //触发提交事件
            form.on('submit(formDemo)', function(data){
                $.post('/l/modify',form.val('example'),function (res) {
                    layer.alert(res.msg);
                });
                table.reload('testReload');
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //触发重置
            form.on('submit(reset)', function(){
                //赋初值
                form.val('example',{
                    'id': data.id
                    ,'lotId': data.lotId
                    ,'goodsId': data.goodsId
                    ,'quantity': data.quantity
                    ,'produceTime': data.produceTime
                    ,'standbyOne': data.standbyOne
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        }
        /** 添加 **/
        function addInfo(data) {
            layer.open({
                type: 1
                ,area: ['1000px','600px']
                ,title: '添加批次信息'
                ,content: $('#addPage').html()
            });
            printOption(dataParams);
            //开启日期选择器
            laydate.render({
                elem: '.dateUtil'
                ,type: 'datetime'
            });
            //触发提交事件
            form.on('submit(formDemo)', function(data){
                $.post('/l/add',form.val('example'),function (res) {
                    layer.alert(res.msg);
                });
                table.reload('testReload');
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //触发重置事件
            form.on('submit(reset)', function(data){
                form.reset();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        }
        //触发事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    addInfo();
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });

        /** 自定义表单验证 **/
        form.verify({
            standbyOne: [
                /^[\u4e00-\u9fa5]{1,2}$/
                ,'请填入中文单位1-2字符'
            ]
            ,lotId: [
                /^(CP)|(CL)[0-9]{11}$/
                ,'请按格式填入批次编号，例：CP2021121101'
            ]
        });
        /** 生成下拉选项内容 **/
        function printOption(dataList) {
            //生成选项
            for (let i = 0; i < dataList.length; i++) {
                let $option = $("<option value='" + dataList[i].name + "'>" + dataList[i].value + "</option>");
                $(".form-table-select").append($option);
            }
            //渲染下拉框
            form.render('select');
        }

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="detailPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物品编号</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsId" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">批次编号</label>
            <div class="layui-input-inline">
                <input type="text" name="lotId" required lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="quantity" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出产时间</label>
            <div class="layui-input-inline">
                <input type="text" name="produceTime" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">计量单位</label>
            <div class="layui-input-inline">
                <input type="text" name="standbyOne" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="editPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物品编号</label>
            <div class="layui-input-inline">
                <select name="goodsId" class="layui-input form-table-select" disabled placeholder="必填" lay-verify="required" required autocomplete="off">
                    <option value="">-请选择-</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">批次编号</label>
            <div class="layui-input-inline">
                <input type="text" name="lotId" required lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="quantity" required  lay-verify="required|number"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出产时间</label>
            <div class="layui-input-inline">
                <input type="text" name="produceTime" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">计量单位</label>
            <div class="layui-input-inline">
                <input type="text" name="standbyOne" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item btn">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="addPage">
    <form class="layui-form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">物品编号</label>
            <div class="layui-input-inline">
                <select name="goodsId" class="layui-input form-table-select"  placeholder="必填" lay-verify="required" required autocomplete="off">
                    <option value="">-请选择-</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">批次编号</label>
            <div class="layui-input-inline">
                <input type="text" name="lotId" required lay-verify="lotId" placeholder="必填" autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="quantity" required  lay-verify="required|number" placeholder="必填"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出产时间</label>
            <div class="layui-input-inline">
                <input type="text" name="produceTime" required  lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input dateUtil">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">计量单位</label>
            <div class="layui-input-inline">
                <input type="text" name="standbyOne" required  lay-verify="required" placeholder="必填"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item btn">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
            </div>
        </div>
    </form>
</script>
</html>